<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>蒲公英-后台管理系统</title>
<link rel="shortcut icon" href="${ctx}/resources/imgs/favicon.ico" />
<script type="text/javascript" src="${ctx}/resources/vendor/jquery/jquery-1.11.3.min.js"></script>
<script src="${ctx}/resources/vendor/echarts-2.2.7/echarts.js"></script>
<style type="text/css">
.mui-switch {
	width: 52px;
	height: 31px;
	position: relative;
	border: 1px solid #dfdfdf;
	background-color: #fdfdfd;
	box-shadow: #dfdfdf 0 0 0 0 inset;
	border-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-clip: content-box;
	display: inline-block;
	-webkit-appearance: none;
	user-select: none;
	outline: none;
}

.mui-switch:before {
	content: '';
	width: 29px;
	height: 29px;
	position: absolute;
	top: 0px;
	left: 0;
	border-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mui-switch:checked {
	border-color: #64bd63;
	box-shadow: #64bd63 0 0 0 16px inset;
	background-color: #64bd63;
}

.mui-switch:checked:before {
	left: 21px;
}

.mui-switch.mui-switch-animbg {
	transition: background-color ease 0.4s;
}

.mui-switch.mui-switch-animbg:before {
	transition: left 0.3s;
}

.mui-switch.mui-switch-animbg:checked {
	box-shadow: #dfdfdf 0 0 0 0 inset;
	background-color: #64bd63;
	transition: border-color 0.4s, background-color ease 0.4s;
}

.mui-switch.mui-switch-animbg:checked:before {
	transition: left 0.3s;
}

.mui-switch.mui-switch-anim {
	transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}

.mui-switch.mui-switch-anim:before {
	transition: left 0.3s;
}

.mui-switch.mui-switch-anim:checked {
	box-shadow: #64bd63 0 0 0 16px inset;
	background-color: #64bd63;
	transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}

.mui-switch.mui-switch-anim:checked:before {
	transition: left 0.3s;
}

/*# sourceMappingURL=mui-switch.css.map */
</style>


<script type="text/javascript">
	// 路径配置
	require.config({
		paths : {
			echarts : '${ctx}/resources/vendor/echarts-2.2.7'
		}
	});
	require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',
			'echarts/theme/dark' ], function(ec) {
		// 基于准备好的dom，初始化echarts图表
		var myChart = ec.init(document.getElementById('main'), "macarons");

		var option = {
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌',
						'必应', '其他' ]
			},
			toolbox : {
				show : true,
				orient : 'horizontal',
				x : 'center',
				y : 'top',
				padding : 30,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar', 'stack', 'tiled' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
			} ],
			yAxis : [ {
				type : 'value',
				margin : 122,
			} ],
			series : [ {
				name : '直接访问',
				type : 'bar',
				data : [ 320, 332, 301, 334, 390, 330, 320 ]
			}, {
				name : '邮件营销',
				type : 'bar',
				stack : '广告',
				data : [ 120, 132, 101, 134, 90, 230, 210 ]
			}, {
				name : '联盟广告',
				type : 'bar',
				stack : '广告',
				data : [ 220, 182, 191, 234, 290, 330, 310 ]
			}, {
				name : '视频广告',
				type : 'bar',
				stack : '广告',
				data : [ 150, 232, 201, 154, 190, 330, 410 ]
			}, {
				name : '搜索引擎',
				type : 'bar',
				data : [ 862, 1018, 964, 1026, 1679, 1600, 1570 ],
				markLine : {
					itemStyle : {
						normal : {
							lineStyle : {
								type : 'dashed'
							}
						}
					},
					data : [ [ {
						type : 'min'
					}, {
						type : 'max'
					} ] ]
				}
			}, {
				name : '百度',
				type : 'bar',
				barWidth : 5,
				stack : '搜索引擎',
				data : [ 620, 732, 701, 734, 1090, 1130, 1120 ]
			}, {
				name : '谷歌',
				type : 'bar',
				stack : '搜索引擎',
				data : [ 120, 132, 101, 134, 290, 230, 220 ]
			}, {
				name : '必应',
				type : 'bar',
				stack : '搜索引擎',
				data : [ 60, 72, 71, 74, 190, 130, 110 ]
			}, {
				name : '其他',
				type : 'bar',
				stack : '搜索引擎',
				data : [ 62, 82, 91, 84, 109, 110, 120 ]
			} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
		//myChart.setTheme("macarons");
	});
</script>
</head>
<body>
	<h1>Hello World Echarts 2.2.7</h1>

	<div id="main" style="height:400px"></div>


	<form class="mui-form" name="" method="post" action="#" id="">
            <fieldset>
                <legend>表单标题</legend>
                <div class="mui-switch-con">
                    <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
                </div>
                <div class="mui-switch-con">
                    <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
                </div>

            </fieldset>
        </form>
</body>
</html>